<template>
  <el-form-item class="edit-item edit-item-input input-normal">
    <slot name="label">
      <label>
        {{label}}
        <TooltipsCommon v-if="getTooltips" :tooltips="getTooltips"></TooltipsCommon>
      </label>
    </slot>

    <el-input
      style="flex: 1;"
      :type="type"
      :disabled="toBool(disabled)"
      v-model="modelValue"
      :placeholder="placeholder"
      @input="onChange($event)">
        <template #prefix>
          <i class="">{{unit}}</i>
        </template>
    </el-input>
  </el-form-item>
</template>

<script>
  import { defineAsyncComponent } from 'vue';
  export default {
    emits: ['change','update:modelValue'],
    name: 'InputNormal',
    props: {
      label: String,
      tooltips: String,
      modelValue: [String, Number],
      placeholder: {
        type: String,
        default: '',
      },
      maxLength: {
        type: Number,
        default: 100,
      },
      type: {
        type: String,
        default: 'text',
      },
      disabled: {
        type: [Boolean, String],
        default: false,
      },
      unit: {
        type: String,
        default: '',
      },
    },
    components: {
      TooltipsCommon: defineAsyncComponent(() => import('./comps/TooltipCommon.vue')),
    },
    computed: {
      getTooltips() {
        return !this.tooltips && this.placeholder ? this.placeholder : this.tooltips;
      }
    },
    methods: {
      onChange(val) {
        this.$emit('update:modelValue', val);
        this.$emit('change', val);
      },
      toBool(val) {
        return typeof val === "boolean" ? val
          : val === "true" ? true : false;
      }
    }
  }
</script>
